<!--
    打印出差单弹窗
 -->
 <template>
    <div>
     <el-dialog :title="title"
        :visible.sync="dialogShow"
        :width="width" 
        :close-on-click-modal="false"
        :align="align"
        :top="top"
        :fullscreen="fullscreen"
        :append-to-body="true"
        :model-append-to-body="true"
        @close="dialogClose"
        @open="openDialog"
        custom-class="u-dyccd-dialog">
         <template >
         <div class="main-box">
          <p class="title">自贡市公安局出差审批单</p>
          <div class="secondTitle">
            <span class="left">申请部门：研发部门</span>
            <span class="right">时间：2023-01-01</span>
          </div>
          <div class="content">
            <el-row v-for="(row,index) in formData" :key="index">
              <el-col
              :span="item.sp"
              v-for="(item,index) in row" 
              :key="index + 'a'" 
              :class="item.main == true ? 'minclo' : 'secondclo'">
              <span class="main-content">
                {{ item.label }}
              </span>
              </el-col>
            </el-row>
          </div>
          <div style="margin-top:8px">
            <p style="font-size: 14px;font-family: Nunito-Regular, Nunito;font-weight: 400;color: #333333;">备注：1、出差人员按程序审批，用作报销差旅费附件；2、参会及培训人员需要提供参会及培训的依据。</p>
          </div>
         </div>
          </template>
          
    </el-dialog> 
    
    </div>
    
</template>
<script>
export default {
    components:{
    },
    props:{
        width:{type:String, default: '60%',},
        align:{type:String, default: 'left',},
        top:{type:String, default: '10vh',},
        title:{type:String, default: '打印出差单',},
        fullscreen:{type:Boolean, default: false,},
        show:{type:Boolean, default: false,},
        customClass:{type:String, default: '',}
    },
    data(){
        return{
            dialogShow:false,
            formData:[
                [
                    {label:'事由:',sp:2,main:true,},
                    {label:'此处填写出差的缘由',sp:22},
                ],
                [
                    {label:'时间:',sp:2,main:true,},
                    {label:'时间',sp:22},
                ],
                [
                    {label:'往返地点:',sp:2,main:true,},
                    {label:'从成都  至  上海',sp:22},
                ],
                [
                    {label:'出差人员:',sp:2,main:true,},
                    {label:'张三、李四、王麻子',sp:22},
                ],
                [
                    {label:'交通工具:',sp:2,main:true,},
                    {label:'火车、飞机、对方派车',sp:22},
                ],
                [
                    {label:'预计费用:',sp:2,main:true,},
                    {label:'1,000,000.00元',sp:22},
                ],
                [
                    {label:'经办人',sp:2,main:true,},
                    {label:'张三',sp:6},
                    {label:'部门审核：',sp:2,main:true,},
                    {label:'研发部门负责人',sp:6},
                    {label:'领导审批：',sp:2,main:true,},
                    {label:'科室领导',sp:6},
                ],
              
            ]
         }
    },
    mounted(){
      
    },
    methods:{
        dialogClose(){
            this.$emit('update:show',false)
            this.$emit('close')
        },
        openDialog(){
            this.$emit('open')
        },
        submit() {
            this.$emit('submit')
        },
     
       
    },
    watch: {
        show: {
            handler: function(val) {
                this.dialogShow = val;
            },
            immediate: true
        }
    }

}
</script>
<style>

</style>

<style lang="scss">
.u-dyccd-dialog{
    height: 670px;
    .el-dialog__body{
        height: calc(100% - 40px - 70px);
        padding:36px 54px 36px 36px;
    }
     .el-dialog__header{
        height: 60px;
        border-bottom: 1px solid #D8D8D8;
        span{
        font-size: 20px;
        font-family: Nunito-Regular, Nunito;
        font-weight: 400;
        color: #333333;
        }
     }
     .el-dialog__close{
     font-size: 22px;
     }
     .main-box{
        height: 100%;
      .title{
        height: 28px;
        font-size: 22px;
        font-family: Nunito-Medium, Nunito;
        font-weight: 500;
        color: #333333;
        line-height: 28px;
        text-align: center;
      }
      .secondTitle{
      margin-top: 12px;
      margin-bottom: 12px;
      span{
        font-size: 14px;
        font-family: Nunito-Regular, Nunito;
        font-weight: 400;
        color: #333333;
      }
      .right{
        float: right;
      }
      }
      .content{
        border: 1px solid #333;
        .el-row{
        border-top: 1px solid #333;
        padding-left: 16px;
        }
        .minclo{
            span{
            font-size: 14px;
            font-family: Nunito-Regular, Nunito;
            font-weight: 400;
            color: #666666;
            }
        }
        .secondclo{
            span{
            font-size: 14px;
            font-family: Nunito-Regular, Nunito;
            font-weight: 400;
            color: #333333;
            }
        }
        .main-content{
            height: 46px;
            line-height: 46px;
        }
      }
     }
}
</style>

